<script setup lang="tsx">
import { ref, reactive } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { useSearch } from '@/hooks/web/useSearch'
import {
  adminBusinessSubsidyPageApi,
  adminBusinessRechargeApplyPageApi
} from '@/api/MerchantAccount'
import { ElImage } from 'element-plus'

const props = defineProps({
  type: {
    type: Number,
    default: 0
  }
})

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    let api = props.type === 1 ? adminBusinessSubsidyPageApi : adminBusinessRechargeApplyPageApi
    const res = await api({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list || [],
      total: res.data.total || 0
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods

const { searchRegister } = useSearch()

const crudSchemas = reactive<CrudSchema[]>([
  {
    label: '充值编号',
    field: 'orderNo',
    hidden: props.type === 2,
    search: {
      hidden: true
    }
  },
  {
    label: '申请单号',
    field: 'applyNo',
    hidden: props.type === 1,
    search: {
      hidden: true
    }
  },
  {
    label: props.type === 1 ? '充值金额' : '打款金额',
    field: 'tradeAmt',
    search: {
      hidden: true
    }
  },
  {
    label: '打款单号',
    field: 'paymentNo',
    hidden: props.type === 1,
    search: {
      hidden: true
    }
  },
  {
    field: 'paymentImage',
    label: '打款凭证',
    hidden: props.type === 1,
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      width: 220,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div class={'flex items-center'}>
                <ElImage
                  v-if={row.paymentImage}
                  src={row.paymentImage}
                  fit="cover"
                  class="w-15"
                  lazy
                  preview-src-list={[row.paymentImage]}
                  preview-teleported
                />
              </div>
            </>
          )
        }
      }
    }
  },
  {
    label: '第三方交易流水号',
    field: 'reqSeqId',
    hidden: props.type === 2,
    search: {
      hidden: true
    }
  },
  {
    label: '状态',
    field: 'tradeState',
    hidden: props.type === 2,
    search: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div>
                {row.tradeState === 1
                  ? '待支付'
                  : row.tradeState === 2
                    ? '处理中'
                    : row.tradeState === 3
                      ? '充值成功'
                      : '充值失败'}
              </div>
              {row.tradeState === 4 ? <div>{`原因：${row.failReason}`}</div> : ''}
            </>
          )
        }
      }
    }
  },
  {
    label: '状态',
    field: 'state',
    hidden: props.type === 1,
    search: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div>{row.state === 1 ? '待审核' : row.state === 2 ? '审核失败' : '审核成功'}</div>
              {row.state === 2 ? <div>{`原因：${row.refuseReason}`}</div> : ''}
            </>
          )
        }
      }
    }
  },
  {
    label: '申请时间',
    field: 'createTime',
    hidden: props.type === 1,
    search: {
      hidden: props.type === 1,
      component: 'DatePicker',
      componentProps: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    }
  },
  {
    label: '提交时间',
    field: 'tradeTime',
    hidden: props.type === 2,
    search: {
      hidden: props.type === 2,
      component: 'DatePicker',
      componentProps: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const searchParams = ref({})
const setSearchParams = (params: any) => {
  if (props.type === 1) {
    const { tradeTime, ...rest } = params
    let startTradeTime, endTradeTime
    if (tradeTime && tradeTime.length > 0) {
      startTradeTime = tradeTime[0]
      endTradeTime = tradeTime[1]
    }
    currentPage.value = 1
    searchParams.value = {
      startTradeTime,
      endTradeTime,
      ...rest
    }
  } else {
    const { createTime, ...rest } = params
    let startCreateTime, endCreateTime
    if (createTime && createTime.length > 0) {
      startCreateTime = createTime[0]
      endCreateTime = createTime[1]
    }
    currentPage.value = 1
    searchParams.value = {
      startCreateTime,
      endCreateTime,
      ...rest
    }
  }
  getList()
}

const refresh = () => {
  setSearchParams(searchParams.value)
}

defineExpose({
  refresh
})
</script>

<template>
  <div>
    <Search
      :schema="allSchemas.searchSchema"
      @reset="setSearchParams"
      @search="setSearchParams"
      @register="searchRegister"
    />
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
  </div>
</template>
